<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>iMusic</title>
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="jQuery/jquery.mCustomScrollbar.concat.min.js"></script>

</head>
<body>
<header>
    <h1 class="logo"><a href="#"><h5>iMusic</h5></a></h1>
    <ul class="register">
        <li>登录</li>
        <li>注册</li>
    </ul>
</header>
<main class="content">
    <div class="content_in">
        <div class="content_left">
            <div class="content_toolbar">
                <span><i></i>收藏</span>
                <span><i></i>添加到</span>
                <span><i></i>下载</span>
                <span><i></i>删除</span>
                <span><i></i>清空列表</span>
            </div>
            <div class="content_list">
                <ul>
                    <li class="list_title">
                        <div class="list_check"><i></i></div>
                        <div class="list_number"></div>
                        <div class="list_name">歌曲</div>
                        <div class="list_singer">歌手</div>
                        <div class="list_time">收藏</div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="content_right">
            <div class="song_info">
                <a href="javascript:;" class="song_info_pic">
                    <img src="images/lnj.jpg" alt="">
                </a>
                <div class="song_info_name">歌曲名称:
                    <a href="javascript:;">前端程序员</a>
                </div>
                <div class="song_info_singer">歌手名:
                    <a href="javascript:;">彭晏</a>
                </div>
                <div class="song_info_ablum">专辑名:
                    <a href="javascript:;">努力努力再努力</a>
                </div>
            </div>
            <div class="song_lyric_container">
            <ul class="song_lyric" id="song_lyric">
                <!--<li class="cur">第一条</li>-->
                <!--<li>第二条</li>-->
            </ul>
            </div>
        </div>
    </div>
</main>
<footer>
    <div class="footer_in">
        <a href="javascript:;" class="music_pre mt10"></a>
        <a href="javascript:;" class="music_play"></a>
        <a href="javascript:;" class="music_next"></a>
        <div class="music_progress_info">
            <div class="music_progress_top">
                <span class="music_progress_name">咔咔/pzy</span>
                <span class="music_progress_time">00:00 / 05:23</span>
            </div>
            <div class="music_progress_bar">
                <div class="music_progress_line">
                    <div class="music_progress_dot"></div>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="music_mode "></a>
        <a href="javascript:;" class="music_fav "></a>
        <a href="" download="" class="music_down"></a>
        <a href="javascript:;" class="music_comment"></a>
        <a href="javascript:;"  class="music_only" ></a>
        <div class="music_voice_info">
            <a href="javascript:;" class="music_voice_icon"></a>
            <div class="music_voice_bar">
                <div class="music_voice_line">
                    <div class="music_voice_dot"></div>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="mask_bg"></div>
<div class="mask"></div>
<audio src=""></audio>
<script src="js/progress.js"></script>
<script src="js/player.js"></script>
<script src="js/lyric.js"></script>
<script src="js/index.js"></script>

</body>
</html>